<template>
  <el-table
    :data="data"
    :default-sort="{
      prop: 'changePercent',
      order: order ? 'descending' : 'ascending'
    }"
  >
    <el-table-column prop="code" label="股票代码" />
    <el-table-column prop="name" label="股票名称" />
    <el-table-column prop="price" label="当前价格" />
    <el-table-column prop="changePercent" label="涨跌幅">
      <template #default="{ row }">
        <span :class="row.changePercent >= 0 ? 'up-text' : 'down-text'">
          {{ row.changePercent }}%
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="mainMoneyNet" label="主力净流入" sortable>
      <template #default="{ row }">
        <span :class="row.mainMoneyNet >= 0 ? 'up-text' : 'down-text'">
          {{ formatMainMoney(row.mainMoneyNet) }}亿
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="threeDayChange" label="三日涨幅" sortable>
      <template #default="{ row }">
        <span :class="row.threeDayChange >= 0 ? 'up-text' : 'down-text'">
          {{ row.threeDayChange }}%
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="fiveDayChange" label="五日涨幅" sortable>
      <template #default="{ row }">
        <span :class="row.fiveDayChange >= 0 ? 'up-text' : 'down-text'">
          {{ row.fiveDayChange }}%
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="limitUpDays" label="近5天板数" sortable>
      <template #default="{ row }">
        <span v-if="row.limitUpDays > 0" class="limit-up-text">
          {{ row.limitUpDays }}板
        </span>
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column label="预测得分" prop="predictionScore" sortable>
      <template #default="{ row }">
        <div
          class="score-text"
          :style="{ color: getScoreColor(row.predictionScore) }"
        >
          {{ Math.round(row.predictionScore) }}分
        </div>
      </template>
    </el-table-column>
    <el-table-column label="预测结果" prop="predictionScore">
      <template #default="{ row }">
        <el-tag
          :type="getRecommendationType(row.predictionScore)"
          :class="{
            'strong-prediction': row.predictionScore >= 80
          }"
        >
          {{ getRecommendation(row.predictionScore) }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
defineProps({
  data: {
    type: Array,
    required: true
  },
  order: {
    type: Boolean,
    default: true
  }
});

const formatMainMoney = (money) => {
  if (!money || money === '-') return 0;
  return (money / 100000000).toFixed(2);
};
const getRecommendation = (score) => {
  if (score >= 80) return '强烈推荐'; // 各项指标都很优秀
  if (score >= 60) return '建议买入'; // 大部分指标表现良好
  if (score >= 30) return '可以关注'; // 有一定投资价值
  if (score >= 0) return '需要观察'; // 观察变化趋势
  if (score >= -30) return '保持观望'; // 等待更好时机
  if (score >= -60) return '注意风险'; // 存在一定风险
  return '建议规避'; // 风险较大
};
const getRecommendationType = (score) => {
  if (score >= 80) return 'danger'; // 各项指标都很优秀
  if (score >= 60) return 'success'; // 大部分指标表现良好
  if (score >= 30) return 'warning'; // 有一定投资价值
  return 'info'; // 风险较大
};

const getScoreColor = (score) => {
  if (score >= 80) return '#f56c6c';
  if (score >= 60) return '#67C23A';
  if (score >= 30) return '#E6A23C';
  return '#909399';
};
</script>
